<template>
  <el-form :model="form" label-width="100px" style="margin: auto">
    <el-form-item label="企业">
      <el-select v-model="form.unitId" placeholder="请选择">
        <el-option
          v-for="item in allEnterprises"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        >
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-upload
        ref="upload"
        action="#"
        :file-list="fileUploadList"
        :auto-upload="false"
        :http-request="uploadMethod"
        :before-remove="beforeRemove"
        :on-remove="onRemove"
        :with-credentials="true"
        :on-success="onSuccess"
        :on-error="onError"
        multiple
      >
        <el-button
          slot="trigger"
          class="file-input-btn"
          size="small"
          type="primary"
          >选取文件</el-button
        >
        <el-button
          style="margin-left: 10px"
          size="small"
          type="success"
          @click="uploadFiles"
          >上传</el-button
        >
        <div slot="tip">
          点击上传后可以在当前页面查看进度,文件将会在后台传输，请不要刷新页面。
        </div>
      </el-upload>
    </el-form-item>
  </el-form>
</template>

<script>
import { getDirectoryId, getUnitNameList } from "~/api/user";

const fileBuffer = [];
export default {
  name: "FileUpload",
  props: {
    uploadMethod: Function,
    onSuccess: Function,
  },
  data() {
    return {
      fileUploadList: fileBuffer,
      //select相关数据
      allEnterprises: [],
      form: {
        unitId: 1,
        id: null,
      },
      uniqueName: "",
    };
  },
  mounted() {
    this.getUnitNameList();
    this.uniqueName = sessionStorage.getItem("uniqueName");
  },
  methods: {
    async getUnitNameList() {
      try {
        let temp = (await getUnitNameList()).parameter;
        this.allEnterprises = temp.filter((item) => item.id !== 0);
        // this.id = (
        //   await getDirectoryId(this.uniqueName, { unitId: this.unitId })
        // ).parameter.id;
        const res = await getDirectoryId(this.uniqueName, {
          unitId: this.form.unitId,
        });
      } catch (e) {
        this.$alert(e.message, "加载失败", { type: "error" });
        throw e;
      }
    },
    uploadFiles() {
      this.$refs.upload.submit();
    },
    onRemove(file) {
      if (file.raw.cancelSource) {
        file.raw.cancelSource.cancel();
      }
    },
    beforeRemove(file) {
      if (file.status !== "uploading") return true;
      return new Promise((resolve, reject) => {
        this.$confirm(`文件${file.name}正在上传中，是否要取消上传？`, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            resolve();
          })
          .catch(() => {
            reject();
          });
      });
    },
    onError(err, file) {
      let e = err;
      if (err.response && err.response.data) e = err.response.data;
      this.$notify.error({
        title: `${file.name}上传失败！`,
        message: e.message,
      });
    },
  },
};
</script>

<style>
.file-input-btn + .el-upload__input {
  display: none;
}
</style>
